<template>
    <el-dialog :title="mode ==='anchor' ? '上传主播截图' : '上传平台截图'"
               :visible.sync="dialog"
               :close-on-click-modal="false"
               :close-on-press-escape="false"
               @close="close">
        <el-button @click="$refs['file'].click()" type="text" :loading="uploading">选择文件</el-button>
        <input type="file" name="file" id="fileSelector" style="display: none"
               multiple @change="change" ref="file"/>
        <span class="text-gray el-upload__tip">只能上传图片文件，不能超过10MB</span>
        <el-table :data="files" border>
            <el-table-column prop="file.name" label="文件名"/>
            <el-table-column label="上传状态">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.status === 0" type="info">等待中</el-tag>
                    <el-tag v-else-if="scope.row.status === 1">上传中</el-tag>
                    <el-tag v-else-if="scope.row.status === 2" type="success">上传成功</el-tag>
                    <template v-else-if="scope.row.status === 3">
                        <el-tag type="danger">上传失败</el-tag>
                        <br>
                        {{scope.row.error}}
                    </template>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="text"
                               v-if="scope.row.status === 3"
                               @click="upload(scope.row)">再次尝试上传
                    </el-button>
                    <el-button type="text"
                               v-if="[0,3].indexOf(scope.row.status)!==-1"
                               @click="removeFile(scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-dialog>
</template>

<script>
    import queue from 'async/queue';

    const headers = {'Content-Type': 'application/x-www-form-urlencoded'};
    let q;
    export default {
        name: "upload_screenshot",
        props: {
            mode: {
                validator: function (value) {
                    if (['platform', 'anchor'].indexOf(value) === -1)
                        return new Error('只支持platform和anchor两种值');
                    return true;
                }
            },
            schedule: {required: true},
            visible: {default: false,},
        },
        data() {
            return {
                dialog: false,
                files: [],
                value: [],
                uploading: false,
            };
        },
        methods: {
            open() {
                this.dialog = true;
                this.$emit('update:visible', true);
                this.files = [];
                this.value = [];
                q = queue((file, cb) => {
                    this.upload(file, cb);
                }, 1);
            },
            close() {
                this.dialog = false;
                this.$emit('update:visible', false);
                this.$emit('complete', this.value);
            },
            upload(file, cb) {
                const form = new FormData();
                form.append('file', file.file);
                file.status = 1;
                let url;
                if (this.mode === 'anchor')
                    url = `/api/file/${this.schedule.id}/upload_anchor`;
                else
                    url = `/api/file/${this.schedule.id}/upload_platform`;
                this.$http({url: url, method: 'post', data: form, headers})
                    .then(res => {
                        this.value.push(res.data);
                        file.status = 2;
                    })
                    .catch(err => {
                        file.status = 3;
                        file.error = err.response.data;
                    })
                    .finally(() => {
                        if (cb)
                            cb();
                    });
            },
            change() {
                _.each(this.$refs.file.files, file => {
                    if (!this.checkFile(file))
                        return this.$message.error(file.name + ' 不符合上传要求');
                    const d = {file: file, status: 0};
                    q.push(d);
                    this.files.push(d);
                });
            },
            checkFile(file) {
                const isImage = file.type.toLowerCase().indexOf('image') === 0;
                const fileSizeLimit = file.size / 1024 / 1024 < 10;
                return isImage && fileSizeLimit;
            },
            removeFile(file) {
                this.files.splice(this.files.indexOf(file), 1);
            },
        },
        watch: {
            visible(val) {
                if (val && !this.dialog)
                    this.open();
                else if (this.dialog)
                    this.close();
            },
        }
    }
</script>

<style scoped>

</style>